<template>
  <div class="attrs-view">
    <p>1.vue - 组件通信之$attrs 、$listeners</p>
    <div class="message-item">
      <child
        class="arrts"
        id="10"
        age="20"
        sex="男"
        @getInfo="getInfo"
        @getMessage="getMessage"
      ></child>
    </div>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {};
  },
  methods: {
    getInfo(val) {
      console.log("getInfo事件来源于index.vue" + val);
    },
    getMessage(val) {
      console.log("getMessage事件来源于index.vue" + val);
    },
  },
};
</script>
<style lang="scss">
.attrs-view {
  height: 100%;
  overflow: auto;
  padding: 0 5px;
  .message-item {
    border: 1px solid #ccc;
    padding: 5px;
  }
}
</style>
